<template>
   <div class="list">
      <!-- 顶部按钮 -->
      <div class="option">
         <el-button type="primary" plain>添加导航栏</el-button>
         <!-- <el-button type="warning" plain @click="__exportExl">导出</el-button> -->
      </div>
      <!-- 表格数据 -->
      <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%" height="500">
         <el-table-column label="编号" width="55" type="index" :index="indexMethod">
         </el-table-column>
         <el-table-column label="标题">
            <template slot-scope="{row}">{{ row.title }}</template>
         </el-table-column>
         <el-table-column label="分类ID">
            <template slot-scope="{row}">{{ row.categoryId }}</template>
         </el-table-column>
         <el-table-column label="分类名称">
            <template slot-scope="{row}">{{ row.categoryName }}</template>
         </el-table-column>
         <el-table-column label="排序">
            <template slot-scope="{row}">{{ row.weight }}</template>
         </el-table-column>
         <!-- 操作按钮 -->
         <el-table-column label="操作" row-style="{color: '#1890ff'}">
            <template slot-scope="{row}">
               <span style="color: #409eff; margin-right: 6px; cursor: pointer;" @click="dialogFormVisible = true">
                  <i class="el-icon-edit" style="margin-right: 4px;"></i><span>编辑</span>
               </span>
               <el-popconfirm
                  title="确定删除该导航栏吗？"
                  @confirm="__delOne(row)"
               >
                  <span slot="reference" style="color: #f56c6c; cursor: pointer;">
                     <i class="el-icon-delete" style="margin-right: 4px; "></i>删除
                  </span>
               </el-popconfirm>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
         </el-pagination>
      </div>
   </div>
</template>

<script>
import { getNavListApi } from "@/api/admin"
import { saveAs } from 'file-saver'

export default {
   name: "",
   data() {
      return {
         formInline: {
            name: '',
            category: ''
         },
         dialogFormVisible: false,
         formLabelWidth: '120px',
         tableData: null,
         multipleSelection: [], // 复选框的值
         pageNum: 1,
         pageSize: 10,
         total: 0,
      }
   },
   created() {
      this.__getNavList()
   },
   methods: {
      async __getNavList() {
         let data = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
         }
         const res = await getNavListApi(data);
         if (!res) return;
         this.tableData = res.data.rows
         this.total = res.data.total
         // console.log("用户列表", this.tableData);
      },
      async __exportExl() {
         const res = await exportProductApi();
         if (!res) return;
         // 处理成表格文件之后调用一个保存数据的方法，浏览器会自动下载
         console.log(res);
         saveAs(
            // Blob 对象表格一个不可变、原始数据的类文件对象
            // Blob 表示的不一定是JavaScript原生格式的数据
            // File 接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件
            // 返回一个新创建的Blob对象，其内容参数中给定的数组串联组成
            new Blob([res]),
            // 设置导出文件名称
            `商品列表_${new Date().getTime()}.xlsx`
         )
      },
      __query() {

      },
      async __delOne(row) { // 禁用
         const res = await delOneProductApi({ id: row.id });
         if (!res) return;
         this.__getProductList()
         this.$message({message: '删除成功', type: 'success'});
         console.log("删除单个商品：", row);
      },
      toggleSelection(rows) {
         console.log("rows: " + rows);
         if (rows) {
            rows.forEach(row => {
               this.$refs.multipleTable.toggleRowSelection(row);
            });
         } else {
            this.$refs.multipleTable.clearSelection();
         }
      },
      handleSelectionChange(val) { // 每点击一次复选框 发生的事件
         this.multipleSelection = val;
         console.log("multipleSelection: ", this.multipleSelection);
      },
      handleSizeChange(val) {
         this.pageSize = val
         this.__getProductList()
         console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         this.pageNum = val
         this.__getProductList()
         console.log(`当前页: ${val}`);
      }
   }
}
</script>

<style lang="less" scoped>
.option {
   margin: -4px 0 10px 0;
}

.pagination {
   display: flex;
   justify-content: flex-end;
   padding: 20px 40px;
}

.list {
   box-sizing: border-box;
}

.el-button {
   padding: 8px 10px !important;
}

.el-input__inner {
   height: 34px !important;
}
</style>
